<template>
  <!-- 这里插槽主要是自定义头部标签操作按钮 -->
  <div>
    <el-form
      ref="headerFormRef"
      :model="headerFormItem"
      size="small"
      :inline="true"
      @submit.native.prevent
    >
      <el-form-item :label="formItem.formName" v-for="(formItem, formIndex) in headerFormOperateList" :key="formIndex">
        <el-input v-if="formItem.formType ==='input'" v-model="headerFormItem[formItem.formKey]"
          :placeholder="formItem.formPlace"></el-input>
        <el-select v-if="formItem.formType ==='select'" v-model="headerFormItem[formItem.formKey]"
          :placeholder="formItem.formPlace" :multiple="formItem.multiple">
          <el-option v-for="item in formItem.formValue" :key="item.id" 
            :label="item.title" :value="item.id">
          </el-option>
        </el-select>
        <el-date-picker
          v-if="
              formItem.formType == 'daterange'
              || formItem.formType == 'date'
              || formItem.formType == 'datetime'
            "
          v-model="headerFormItem[formItem.formKey]"
          :value-format="formItem.valueFormat || 'yyyy-MM-dd'"
          :format="formItem.format || 'yyyy-MM-dd'"
          clearable
          :type="formItem.type"
          :range-separator="formItem.rangeSeparator || '至'"
          :start-placeholder="formItem.startPlaceholder"
          :end-placeholder="formItem.endPlaceholder"
          placeholder="请选择"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetting('headerFormRef')">重置</el-button>
      </el-form-item>
    </el-form>
    <div style="padding: 5px 0 10px 0;" v-if="headButton">
      <slot name="second"></slot>
    </div>
    <el-table 
      :row-class-name="tableRowClassName" :data="tableData" :row-key="rowKey" border @select="select"
      :highlight-current-row="true" @select-all="select" :header-cell-style="{'text-align':headerAlign,'background':'#448ef7'}"
      @current-change="handleCurrentChange" :ref="Math.random()"
    >
      <!-- 复选框 -->
      <el-table-column type="selection" v-if="choice" width="50" :align="headerAlign" :key="Math.random()">
      </el-table-column>
      <!-- 序号 -->
      <!-- <el-table-column label="序号" v-if="serialNumber" width="50" type="index" :align="headerAlign" :key="Math.random()">
        <template slot-scope="scope">
          {{searchData.pageSize * (searchData.pageNum - 1) + (scope.$index + 1)}}
        </template>
      </el-table-column> -->
        <div v-for="(item, index) in tableLabel" :key="index">
          <!-- 普通数据展示/或者字符串文本展示 -->
          <el-table-column v-if="!item.form || item.form ==='string'" :prop="item.prop" :width="item.width"
            :label="item.label" :sortable="item.sort" :align="item.align?item.align:'left'" :key="index"
            show-overflow-tooltip>
          </el-table-column>

          <!-- 数据过滤:根据filter函数自定义规则进行数据返回 -->
          <el-table-column v-else-if="item.form === 'filter'" :width="item.width" :label="item.label"
            :sortable="item.sort" :align="item.align?item.align:'left'" :key="index + 1" show-overflow-tooltip>
            <template slot-scope="scope">
                {{item.filter(scope.row)}}
            </template>
          </el-table-column>
          <!-- 按钮展示 -->
          <el-table-column v-else-if="item.form === 'Button'" :width="item.width" :label="item.label"
              :sortable="item.sort" :align="item.align?item.align:'left'" :key="index + 2">
              <template slot-scope="scope">
                <el-button @click="item.callback&&item.callback(scope.row)"
                  :type="item.configure&&item.configure.type?item.configure.type:''"
                  :size="item.configure&&item.configure.size?item.configure.size:''">
                  {{item.configure.text||'缺少按钮文字'}}</el-button>
              </template>
          </el-table-column>
          <!-- 多个复选框 -->
          <el-table-column v-else-if="item.form === 'checkbox'" :width="item.width" :label="item.label"
              :sortable="item.sort" :align="item.align?item.align:'left'" :key="index + 3">
              <template slot-scope="scope">
                <span style="margin-left: 5px;" v-for="(v,i) in scope.row.authority" :key="i">
                  <el-checkbox :label="v.name" name="type" v-model="v.open"></el-checkbox>
                </span>
                <span v-if="scope.row.authority&&scope.row.authority.length<1">暂无</span>
              </template>
          </el-table-column>
          <!-- 单选框 -->
          <!-- 列表循环数据 每一项必须要有 radioList属性为数组 -->
          <el-table-column v-else-if="item.form === 'radio'" :width="item.width" :label="item.label"
              :sortable="item.sort" :align="item.align?item.align:'left'" :key="index + 4">
              <template slot-scope="scope" >
                <div v-if="scope.row.radioList && scope.row.radioList.length">
                  <el-radio-group v-model="scope.row[item.prop]">
                    <el-radio v-for="items in scope.row.radioList"
                      :key="items[item.key.value]"
                      :label="items[item.key.value]" >{{items[item.key.label]}}</el-radio>
                  </el-radio-group>
                </div>
                <div v-else>
                  <span style="color: #e6a23c;">缺少radioList属性数组!</span>
                </div>
              </template>
            </el-table-column>
            <!-- 列表循环数据 每一项必须要有 options属性为数组 -->
            <el-table-column v-else-if="item.form === 'select'" :width="item.width" :label="item.label"
              :sortable="item.sort" :align="item.align?item.align:'left'" :key="index + 5">
              <template slot-scope="scope">
                <el-select v-model="scope.row[item.prop]" placeholder="请选择" size="mini">
                  <el-option
                    v-for="items in scope.row.options"
                    :key="items[item.key.value]"
                    :label="items[item.key.label]"
                    :value="items[item.key.value]">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <!-- 输入框 -->
            <el-table-column v-else-if="item.form === 'input'" :width="item.width" :label="item.label"
              :sortable="item.sort" :align="item.align?item.align:'left'" :key="index + 6">
              <template slot-scope="scope">
                  <el-input  placeholder="请输入内容" v-model="scope.row[item.prop]" size="mini" >
                  </el-input>
              </template>
            </el-table-column>
        </div>
        <el-table-column label="操作" :width="operation.width" v-if="JSON.stringify(operation)!== '{}'">
          <template slot-scope="scope">
            <!-- 动态操作按钮 -->
            <div class="opreate center">
              <div class="opreate center" v-for="(item,index) in operation.Button" :key="index">
                <el-button style="margin: 0 5px;" v-if="!item.authority"
                  @click="item.callback(Object.assign({},scope.row))" :type="item.type?item.type:''"
                  :size="item.size?item.size:''" :disabled="item.disabled"
                >{{item.label}}</el-button>
              </div>
            </div>
          </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div style="padding: 10px;" v-if="paging" :style="{'text-align':pagingPosition}">
      <el-pagination @size-change="handleNumberChange" @current-change="handleCurrentPage"
          :current-page="searchData.pageNum" :page-sizes="[10,15, 20, 30, 40,50]" :page-size="searchData.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
  <!-- 操作按钮 -->
    <!-- {
        label:'删除',
        type:'danger',// 按钮类型  参考el-button 官网参数
        size:"mini", // 按钮大小  参考el-button 官网参数
        plain:true, // 是否朴素按钮
        callback(row){}, // 点击按钮回调函数
        disabled(row){ return true/false} //是否禁用 可以条件判断 让函数返回布尔值
        authority:true// 如果涉及到权限按钮控制的 就添加这个属性(false普通按钮/true权限按钮)
        authorityEvent(row){return true/false}
    } -->
  <!-- 动态表头 -->
  <!-- {
    prop:'title',// 列表渲染的字段key
    label:'菜单名称',// 字段中文名称
    align:''// 列表内容文字的位置
    sort:true, // 是否排序
    form:'string', (可选:string/img/Button/filter/select)
    key:{label: "label",value: "value"} // 这个配置是下拉框的form = select
    filter(row){},// 对数据进行过滤 并返回内容 和vue 过滤器一样的功能
    configure:{ // 配置按钮的参数对象
        type:''// 参考el-button 官网参数
        size:''// 参考el-button 官网参数
    },
    callback(row){} //点击按钮的回调函数
  } -->
  <!-- 表头配置tableLabel -->
  <!-- {
      prop: 'timeType',最终下拉框每次选中的值都绑定到 这个定义的字段上
      label: '时间单位',
      align: 'center',
      form: "radio",
      key: {
          label: "label",
          value: "value"
      },
      width: 250,
  }, -->
  <!-- 下拉框 -->
  <!-- 表头配置tableLabel -->
  <!-- {
      prop:'xxx' 最终下拉框每次选中的值都绑定到 这个定义的字段上
      form:'select',
      key:{label: "label",value: "value"}
  } -->
</template>

<script>
export default {
  components: {},
  props: {
    plain: {
        type: Boolean,
        default: true
    },
    headButton: {
        type: Boolean,
        default: false
    },
    tableData: { // 数据
        type: Array,
        default: () => ([])
    },
    treeProps: { // 支持树类型的数据的显示
        type: Object,
        default: () => ({
            children: 'children'
        })
    },
    rowKey: { //树类型的数据 列表必须要指定row-key id
        type: String,
        default: '_id'
    },
    serialNumber: { // 是否需要序号
        type: Boolean,
        default: true
    },
    headerAlign: {
        type: String,
        default: 'left'
    },
    tableLabel: {
        type: Array,
        default: () => ([])
    },
    choice: {
        type: Boolean,
        default: false
    },
    operation: {
        type: Object,
        default: () => ({})
    },
    headerFormOperateList: {
        type: Array,
        default: () => ([])
    },
    total: {
        type: Number,
        default: 0
    },
    loadingState: {
      type: Boolean,
      default: false
    },
    paging: {
        type: Boolean,
        default: false
    },
    pagingPosition: {
        type: String,
        default: 'left'
    },
    fixedHeight: {
        type: Number,
        default: 0
    },
    pagingPage: {
        type: Object,
        default: () => ({
            pageSize: 10, 
            pageNum: 1
        })
    },
    // 设置偏移高度(到达每个页面不同内容高度，都可以让列表高度填充满整个可视区)
    difference:{
        type: Number,
        default: 0
    }
  },
  name: '',
  data() {
    let headerFormItem = {};
    for (const obj of this.headerFormOperateList) {
      headerFormItem[obj.formKey] = obj.defaultSelect || "";
    }
    return {
      // defaultImg: defaultImg,
      tableHeight: document.documentElement.clientHeight-(70+80), // 表格自适应高度 默认撑满
      // 分页固定参数
      searchData: {
        pageSize: this.pagingPage.pageSize,
        pageNum: this.pagingPage.pageNum
      },
      headerFormItem: {},
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
    }
  },
  watch: {
    headerFormOperateList: {
      handler(newVal, oldVal) {
        for (const obj of this.headerFormOperateList) {
          if (obj.defaultSelect) {
            headerFormItem[obj.formKey] = obj.defaultSelect;
          }
        }
      },
      deep: true
    }
  },
  created() {
  },
  methods: {
    // 查询
    handleQuery() {
      this.$emit("searchHeader", this.headerFormItem);
    },
    // 重置
    resetting(formName) {
      this.$refs[formName].resetFields();
      let headerFormItem = {};
      for (const obj of this.headerFormOperateList) {
        // formInline[obj.param] = obj.defaultSelect || "";  // 重置时下拉框的默认值如果要保留就选用这个
        headerFormItem[obj.formKey] = ""; // 所有筛选条件清空
      }
      this.headerFormItem = headerFormItem;
      this.$emit("searchHeader", this.headerFormItem);
    },
    // 重置分页参数
    pagingReset(pageSize,pageNum){
      if(!pageSize && !pageNum){
          this.searchData.pageSize = 10;
          this.searchData.pageNum = 1
      } else if(pageSize){
          this.searchData.pageSize = pageSize;
      } else {
          this.searchData.pageNum = pageNum
      }
    },
    test(){
        console.log('添加事件')
    },
    // 切换页数
    handleCurrentPage(val) {
        this.searchData.pageNum = val
        this.$emit('handleCurrentPage', val)
    },
    // 每页N展示条
    handleNumberChange(val) {
        this.searchData.pageSize = val
        this.$emit('handleNumberChange', val)
    },
    // 复选框勾选
    select(row) {
        this.$emit('select', row)
    },
    // 点击列表 获取数据
    handleCurrentChange(row) {
        // console.log(row)
    },
    tableRowClassName({ row, rowIndex }) { 
      if (rowIndex % 2 !== 0) {
        return '';
      } else {
        return 'success-row'
      }
    }
  }
}
</script>

<style scoped lang='scss'>
  .opreate {
    justify-content: space-between;
    text-align: center;
  }
  ::v-deep .el-table__header-wrapper {
    background: #448ef7 !important;
  }
</style>